import React, { Component } from 'react'
import store from '../../redux/store'
import { createIncrementAction, createDecrementAction, createIncrementAyncAction } from '../../redux/count_action'
export default class index extends Component {
    // state = {count:0}
    
    increment = ()=>{
        const {value} = this.selectNumber
        store.dispatch(createIncrementAction(Number(value)))
    }
    decrement = ()=>{
        const {value} = this.selectNumber
        store.dispatch(createDecrementAction(Number(value)))
    }
    incrementIfOdd = ()=>{
        const {value} = this.selectNumber
        const count = store.getState()
        if(count % 2 === 0) return 
        store.dispatch(createIncrementAction(Number(value)))
    }
    incrementAsync = ()=>{
        const {value} = this.selectNumber
        // setTimeout(()=>{
        //     store.dispatch(createIncrementAction(Number(value)))
        // },500)
        // 调用action中定义的异步action方法，不再在组件中写异步代码
        store.dispatch(createIncrementAyncAction(Number(value), 1000))
    }
  render() {
    return (
        <div>
            <h1>当前求和为：{store.getState()}</h1>
            <select ref={c=>this.selectNumber = c}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <button onClick={this.increment}>+</button>
            <button onClick={this.decrement}>-</button>
            <button onClick={this.incrementIfOdd}>当前求和为奇数时加</button>
            <button onClick={this.incrementAsync}>异步加</button>
        </div>
    )
  }
}
